<template>
    <div style="background: #ffff;border-radius: 5%; padding:2%;">
        <nut-row style="padding-bottom: 3%;">
            <nut-col :span="12">
                <div class="avatar">
                    <image class="avatarImage" :src="state.userBaseInfo.imageUrl">
                    </image>
                    <text style="margin-left: 5%;font-size:16px;font-weight: bold;">{{
                state.userBaseInfo.user_Nickname }}</text>
                </div>
            </nut-col>
            <nut-col :span="12">
                <div class="avatarButton">
                    <div style="margin-right: 5%;"><nut-button color="#2b35fa" size="mini" plain>给Ta打赏</nut-button>
                    </div>
                    <div><nut-button color="#2b35fa" size="mini" plain>关注</nut-button></div>
                </div>
            </nut-col>
        </nut-row>
    </div>
    <div style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%;">
        <nut-row>
            <nut-swiper :init-page="2" :auto-play="3000" pagination-visible pagination-color="#426543"
                pagination-unselected-color="#808080">
                <nut-swiper-item v-for="(item, index) in state.imgData" :key="index" style="height: 260px">
                    <img :src="item.src" alt="" style="height: 100%; width: 100%" draggable="false" />
                </nut-swiper-item>
            </nut-swiper>
        </nut-row>
    </div>
    <div>
        <nut-tabs v-model="value" size="large" style="width:90%;margin-left: 5%;margin-top: 5%;">
            <template #titles>
                <div v-for="item in list" :key="item.paneKey" class="custom-tab-item" @click="value = item.paneKey">

                    <div class="custom-title" :class="{ active: value === item.paneKey }">
                        {{ item.title }}
                    </div>
                    <div v-if="value == item.paneKey">
                        <image style="width:60px;height: 20px;margin-bottom: 0;margin-left: 10%;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/04/181204.png">
                        </image>
                    </div>
                </div>
            </template>
            <nut-tab-pane style="border-top: 0.5px solid rgb(174, 174, 174);" v-for="item in list" :key="item.paneKey"
                :pane-key="item.paneKey">
                <!-- <div>{{ item.title }} </div> -->
                <nut-card v-if="item.paneKey == 'c1'" v-for="itemVal in state.projectList" :is-need-price="false"
                    :img-url="state.imgUrl" :title="itemVal[0].project_Name">
                    <template #prolist>
                        <div class="card-tag-list">
                            <span v-for="iVal in itemVal[0].project_Tag" class="tag">{{ iVal }}</span>
                            <!-- <span class="tag">引领+剪彩</span> -->
                        </div>
                    </template>
                    <template #footer>
                        <div class="card-foot flex"><span style="font-size: 18px;color: red; font-weight: bold;">{{
                itemVal[0].mini_Amount }}</span><span style="font-size: 14px;">元/小时起</span> <nut-button
                                color="#2b35fa" size="mini" style="position: absolute;right: 10rpx;"
                                @click="preClick(itemVal[0])">去下单</nut-button>
                        </div>
                    </template>
                </nut-card>
                <nut-empty v-if="item.paneKey == 'c2'" image="empty" description="暂无数据"></nut-empty>
                <nut-empty v-if="item.paneKey == 'c3'" image="empty" description="暂无数据"></nut-empty>
            </nut-tab-pane>
        </nut-tabs>
        <nut-dialog title="下单须知" v-model:visible="visible" @ok="onOk()" @cancel="onCancel()">
            <template #default>
                <p align="left">&nbsp;&nbsp;尊敬的用户，欢迎您通过平台向服务提供方购买服务项目，但您下单前，请仔细阅读以下须知：</p>
                <p align="left">1.万必联并非您所选择服务的提供者，万必联仅依照《用户协议》等的约定向您展示服务提供方及承包其服务项目的自然人或个体工商户的有关信息。</p>
                <p align="left">2.服务提供者对于不正当、不合理的行为和要求，有权拒绝服务，如肢体接触、言语侮辱、劝酒等行为，服务提供者及相关方将保留追究有关人员法律责任，且该订单金额概不退还。</p>
                <p align="left">3.服务提供者未接单或者未出发，客户取消订单，万必联将协调服务提供方全额退款。</p>
                <p align="left">4.服务提供者出发后服务开始前，因客户原因取消订单，客户需支付服务提供者往返车费，并以50元作为空单费补偿。</p>
                <p align="left">5.服务开始后，因用户个人原因提前终止服务的，项目服务费不予退还。</p>
                <p align="left">6.您下单需收取服务提供方出行的往返交通费（一公里内免费)。</p>
                <p align="left">7.禁止服务提供方私自线下接单，您发现该情况后可向我们反馈，我们查实后将向您奖励500元。</p>
                <p align="left">
                    8.服务提供者到达服务地址后，若联系不上您，会等待30分钟；如30分钟后仍无法联系上将自行离开，该订单自动取消，订单部分金额返还，但往返车费不予退还，一公里内（免往返车费）则扣除50元空单费。</p>
                <p align="left">9.请您不要随意透露个人信息，如真实姓名、电话号码、家庭住址等。</p>
                <p align="left">10.服务场所须选择在公共场所：在公共场所或者人多的地方相见，避免在荒僻或者人烟稀少等难以保障您安全的区域或场所享受服务或提供服务。</p>
                <p align="left">11.请您注意文明言行：在享受服务与提供服务的过程中，礼貌、友好交流，不得侮辱、辱骂服务提供者或服务需求者，不得有不当肢体接触等。</p>
                <p align="left">12.请您防范网络诈骗：谨防不法分子利用平台进行网络诈骗，禁止服务提供者与服务需求者线下接单、交易，平台不保障线下交易的任何安全及风险。</p>
                <p align="left">13.违规违法投诉：平台坚决抵制一切违法行为，如果在使用万必联过程中遇到任何违规违法问题，及时向平台投诉，以便于我们及时处理和解决。</p>
                <p align="left">14.平台设有一键报警系统，如您的人身财产安全受到威胁时，请直接点击该图标并拨打报警电话。严禁从事涉黄、涉毒、涉赌等违法犯罪活动。</p>
                <p align="left">
                    15、免责声明：您们在服务过程中服用任何对身体造成危害及造成情绪失控的产品（如吸毒、饮酒等）或从事有违公序良俗或法律法规规定的行为时，视为您们严重违约，平台方有权立即终止您继续使用平台服务的权利，同时保留追究您们法律责任的权利。
                </p>
            </template>
        </nut-dialog>
    </div>
    <!-- <ProjDetails /> -->
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Left } from '@nutui/icons-vue-taro';
import { showDialog } from '@nutui/nutui'
import { getUserDetailsByID, getPageSettingList } from '../../../../api/index'
import Taro from '@tarojs/taro'
import { FileItem } from '@nutui/nutui-taro/dist/types/__VUE/uploader/type';
const value = ref('c1')
const list = ref([
    {
        title: '提供的项目',
        // icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180234.png',
        paneKey: 'c1'
    },
    {
        title: 'Ta的动态',
        // icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180443.png',
        paneKey: 'c2'
    },
    {
        title: '客户评价',
        // icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180153.png',
        paneKey: 'c3'
    }
])
const state = reactive({
    showPreview: false,
    imgData: [
        {
            src: 'https://cxj.szzkba.cn/upload/i/2024/06/05/163233.jpg'
        },
        {
            src: 'https://cxj.szzkba.cn/upload/i/2024/06/05/163233.jpeg'
        },
        {
            src: 'https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg'
        },
    ],
    imgUrl:
        'https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg',
    title: '礼仪模特',
    userDetailsInfo: [],
    userBaseInfo: [],
    userServiceInfo: [],
    projectList: [],
    tempProject: [],
})
const jumpTo = (path) => {
    Taro.navigateTo({ url: path })
}
const visible = ref(false)
const onCancel = () => {
    state.tempProject = []
    console.log('event cancel:' + state.tempProject)
}
const onOk = () => {
    const tempUrl = '/packageA/pages/order/orderDetails?projectID=' + state.tempProject.ID + '&userID=' + state.userBaseInfo.ID
    jumpTo(tempUrl)
    // console.log('event ok')
}
const preClick = (val) => {
    state.tempProject = val
    visible.value = true
    console.log(state.tempProject)
}
// const htmlClick = () => {
//   showDialog({
//     title: '温馨提示',
//     content:
//       "<p style='align:left'>尊敬的用户，欢迎您通过平台向服务提供方购买服务项目，但您下单前，请仔细阅读以下须知：<br/> 1.万必联并非您所选择服务的提供者，万必联仅依照《用户协议》等的约定向您展示服务提供方及承包其服务项目的自然人或个体工商户的有关信息。 />",
//     onCancel,
//     onOk
//   })
// }
const getUserDetails = () => {
    const UserID = Taro.getCurrentInstance().router.params.userID
    getUserDetailsByID(UserID).then(res => {
        if (res.code == 0) {
            res.data.reuserDetails.user_Enterts = res.data.reuserDetails.user_Enterts.split(",")
            res.data.reuserDetails.user_Services = res.data.reuserDetails.user_Services.split(",")
            res.data.reuserDetails.user_Leisures = res.data.reuserDetails.user_Leisures.split(",")
            res.data.reuserDetails.user_Balls = res.data.reuserDetails.user_Balls.split(",")
            state.userBaseInfo = res.data.reuserDetails
            getPageSettingList().then(resd => {
                if (resd.code == 0) {
                    console.log(resd.data.list)
                    let proList = resd.data.list
                    res.data.reuserDetails.user_Enterts.forEach((item) => {
                        const ind = proList.findIndex(itemVal => itemVal.project_Name === item);
                        const tempList = proList.filter((item, index) => index == ind)
                        state.projectList.push(tempList)
                    })
                    res.data.reuserDetails.user_Services.forEach((item) => {
                        const ind = proList.findIndex(itemVal => itemVal.project_Name === item);
                        const tempList = proList.filter((item, index) => index == ind)
                        state.projectList.push(tempList)
                    })
                    res.data.reuserDetails.user_Leisures.forEach((item) => {
                        const ind = proList.findIndex(itemVal => itemVal.project_Name === item);
                        const tempList = proList.filter((item, index) => index == ind)
                        state.projectList.push(tempList)
                    })
                    res.data.reuserDetails.user_Balls.forEach((item) => {
                        const ind = proList.findIndex(itemVal => itemVal.project_Name === item);
                        const tempList = proList.filter((item, index) => index == ind)
                        state.projectList.push(tempList)
                    })
                    state.projectList.forEach((i) => {
                        // console.log(i[0].project_Tag.split(','))
                        i[0].project_Tag = i[0].project_Tag.split(',')
                    })
                    console.log(state.projectList)
                }
            })
        }
    })
};
getUserDetails()
</script>
<style lang="scss">
.avatar {
    display: flex;
    margin-right: 5%;
    align-items: center;
}

.nut-card__right__shop {
    display: block !important;
}

.nut-row-flex-nowrap {
    display: flex;
    align-items: center;
}

.nut-dialog__footer-ok {
    background: #2B35FA !important;
}

.nut-dialog__footer-cancel {
    border-color: #2B35FA !important;
    color: #2B35FA !important;
}

.avatarButton {
    display: flex;
    align-items: center;
    margin-left: 20%;
    // margin-top: 5%;
}

.avatarImage {
    margin-left: 5%;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
}

.nut-video-player {
    margin-left: 5%;
    width: 620px;
}

.imageContainer {
    display: flex;
    /* 启用Flexbox布局 */
    flex-wrap: wrap;
    /* 允许元素在必要时换行 */
}

.imageBox {
    flex: 1;
    /* 每个.box平均分配空间 */
    // border: 1px solid #000;
    /* 边框，以便于观察 */
    // padding: 10px;
    /* 内边距 */
    box-sizing: border-box;
    /* 防止内边距和边框增加总尺寸 */
    margin-left: 5%;
    /* 外边距 */

    flex-basis: 100%;
    /* 每个div默认占满一行 */
}

@media screen and (min-width: 620px) {
    .imageBox {
        flex-basis: calc(100% / 3);
        /* 屏幕宽度大于600px时，每个div平分容器宽度的三分之一 */
    }
}

.custom-tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 12%;
}

.custom-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: rgb(66, 66, 66);
    cursor: pointer;
    // margin-top: 40%;
}

.custom-title.active {
    color: black;
    font-weight: bold;
    margin-top: 40%;
}

.nut-tabs__titles .nut-tabs__list {
    background: white;
}

.card-tag-list {
    margin: 15% 0 1px;
    height: 30px;
    overflow: hidden;
}

.card-tag-list>.tag {
    float: left;
    padding: 0 10px;
    border-radius: 1px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    color: #999;
    background-color: #f2f2f7;
    margin-right: 5px;
}

.card-foot {
    margin-top: 5%;
}

.card-title {
    font-weight: bold;
}

.nut-card .nut-card__right .nut-card__right__title {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    line-height: 1.5;
    font-size: 0.8rem;
    font-weight: bold;
}
</style>